import { Image, View } from "@tarojs/components";

import styles from "./index.scss";
import { Descriptions, Item } from "@/components/Descriptions";
import { useRequest } from "taro-hooks";
import Taro, { useDidShow, useRouter, showToast } from "@tarojs/taro";
import ButtonGroup, { Button } from "@/components/ButtonGroup";
import { Dialog } from "@nutui/nutui-react-taro";
import { useState } from "react";
import {
  deleteMaterial,
  getMaterialDetail,
  getMaterialTypeList,
} from "@/services/Material";
import { getImgUrl } from "@/utils";
import { getZoneList } from "@/services/MaterialZone";
import { useFamilyStore } from "@/model";
import formConfig from "../add/form.config";

export default () => {
  const { family } = useFamilyStore();
  const { params } = useRouter();
  const { id } = params;
  const [delOpen, setDelOpen] = useState(false);
  const { data, run: refresh } = useRequest(getMaterialDetail, {
    manual: true,
    defaultParams: [id],
  });
  const { data: zoneList } = useRequest(getZoneList, {
    defaultParams: [family?.id],
  });
  const { data: typeList } = useRequest(getMaterialTypeList);
  useDidShow(() => {
    refresh(id);
  });
  const { run: delRun } = useRequest(deleteMaterial, {
    manual: true,
    onSuccess: () => {
      showToast({
        title: "删除成功",
        icon: "none",
        duration: 1000,
        success: () => {
          setTimeout(() => {
            Taro.navigateBack();
          }, 1000);
        },
      });
    },
  });

  return (
    <View className={styles.container}>
      <View className={styles.top}>
        {" "}
        <Descriptions title="物资信息" contract={false}>
          <Item
            label="图片"
            content={
              <>
                {data?.imgUrl ? (
                  <Image src={getImgUrl(data?.imgUrl)} mode="widthFix" />
                ) : (
                  "加载中"
                )}
              </>
            }
          />
          <Item label="物质名称" content={data?.name} />
          <Item label="描述" content={data?.description} />
          <Item label="存放地" content={data?.storageLocation} />
          <Item label="品牌" content={data?.brand} />
          <Item label="数量" content={data?.amount} />
          <Item label="单价" content={data?.price} />
          <Item
            label="物资分区"
            content={
              data?.materialZoneId &&
              zoneList?.find?.((i) => i.id === data?.materialZoneId)?.name
            }
          />
          <Item
            label="分类"
            content={
              data?.materialClassificationId &&
              typeList?.find?.((i) => i.id === data?.materialClassificationId)
                ?.name
            }
          />
          <Item label="生产日期" content={data?.productionDate} />
          {formConfig[data?.materialClassificationId || ""]?.map?.((item) => (
            <Item
              key={item.label}
              label={item.label}
              content={data?.[item.name]}
            />
          ))}
        </Descriptions>
      </View>

      <ButtonGroup>
        <Button
          onClick={() => {
            setDelOpen(true);
          }}
        >
          删除
        </Button>
        <Button
          type="primary"
          onClick={() => {
            Taro.navigateTo({
              url: "/innerPages/material/add/index?id=" + id,
            });
          }}
        >
          编辑
        </Button>
      </ButtonGroup>
      <Dialog
        title="确认删除该物资？"
        visible={delOpen}
        onConfirm={() => {
          // setDelOpen(false);
          delRun([id])
        }}
        onCancel={() => {
          setDelOpen(false);
        }}
      />
    </View>
  );
};
